<!-- cell分组 -->
<template>
  <view :style="addStyle(customStyle)" class="aster-cell-group">
    <view v-if="isNotEmpty(props.title)" class="aster-cell-group__title">
      <slot name="title">
        <text class="aster-cell-group__title__text">{{ props.title }}</text>
      </slot>
    </view>
    <view class="aster-cell-group__wrapper">
      <view v-if="props.border" class="aster-line" />
      <slot></slot>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { addStyle } from '@/utils';
  import { isNotEmpty } from '@/utils/is';

  const props = defineProps({
    // 分组标题
    title: {
      type: String,
      default: () => '',
    },
    // 是否显示外边框
    border: {
      type: Boolean,
      default: () => false,
    },
    // 样式
    customStyle: {
      type: Object,
      default: () => {},
    },
  });
</script>
<style lang="scss" scoped>
  view,
  scroll-view,
  swiper-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;
  }

  .aster-cell-group {
    flex: 1;

    &__title {
      padding: 32rpx 32rpx 16px;

      &__text {
        font-size: 30rpx;
        line-height: 32rpx;
        color: #303133;
      }
    }

    &__wrapper {
      position: relative;
    }
  }

  .aster-line {
    margin: 0rpx;
    border-bottom-width: 2rpx;
    border-bottom-style: solid;
    width: 100%;
    border-color: #d6d7d9;
  }
</style>
